<template>
  <div class="TabLeft">
    <div class="TabLeft_time">
      截止
      <span>{{tabdata.updateTime || '2022-02-03 14:44:44'}}</span>
      <!--更新于
      <span>{{time}}</span>分钟之前-->
    </div>
    <div class="TabLeft_cont">
      <div class="TabLeft_box">
        <p>
          较上日
          <span class="color1">+{{tabdata.new || 0}}</span>
        </p>
        <p class="color1">{{tabdata.confirm || 0}}</p>
        <div>累计确诊</div>
      </div>
      <div class="TabLeft_box">
        <p>
          较上日
          <span class="color2">+{{tabdata.new_probable || 0}}</span>
        </p>
        <p class="color2">{{tabdata.probable || 0}}</p>
        <div>疑似病例</div>
      </div>
      <div class="TabLeft_box">
        <p>
          较上日
          <span class="color3">+{{tabdata.new_cure || 0}}</span>
        </p>
        <p class="color3">{{tabdata.cure || 0}}</p>
        <div>治愈人数</div>
      </div>
      <div class="TabLeft_box">
        <p>
          较上日
          <span class="color4">+{{tabdata.new_dead || 0}}</span>
        </p>
        <p class="color4">{{tabdata.dead || 0}}</p>
        <div>死亡人数</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import ZhtsAssist from '@/views/wsyj/ZhtsModule/ZhtsAssist.vue';
import { ZhtsServer } from '@/api/installServer';
@Component({
  name: 'TabLeft',
  components: {},
})
export default class TabLeft extends Vue {
  private districtCode: string = '420100';
  private timeout: any;
  private tabdata: any = {
    updateTime: '',
    new: 0,
    confirm: 0,
    new_probable: 0,
    probable: 0,
    new_cure: 0,
    cure: 0,
    new_dead: 0,
    dead: 0,
  };
  private time: any = '0';

  @Watch('$store.state.ZhtsModule.district')
  private getDistrict() {
    this.districtCode = this.$store.state.ZhtsModule.district.id;
    this.getDistrictData();
  }

  private getDistrictData() {
    ZhtsServer.getDistrictData({ areaCode: this.districtCode })
      .then((res: any) => {
        if (res.data) {
          this.tabdata = [];
          this.tabdata = res.data;
          if (this.tabdata.updateTime === null) {
            this.tabdata.updateTime = '';
          }
          this.handleDate();
        }
      })
      .catch((err: any) => (console as any).log('实时疫情播报', err));
  }

  private handleDate() {
    const nowtime = new Date();
    const endtime = new Date(this.tabdata.updateTime);
    const lefttime = (nowtime.getTime() - endtime.getTime()) / 1000;
    const d = (lefttime / (24 * 60 * 60)).toFixed();
    const h = ((lefttime / (60 * 60)) % 24).toFixed();
    const m = ((lefttime / 60) % 60).toFixed();
    // Number(d) < 10 ? '0' + d : d;
    // Number(h) < 10 ? '0' + h : h;
    // Number(m) < 10 ? '0' + m : m;

    if (Number(d) > 0) {
      this.time = `${d}天${h}小时${m}`;
    } else if (Number(h) > 0) {
      this.time = `${h}小时${m}`;
    } else if (Number(m) >= 0) {
      this.time = m;
    }

    // this.timeout = setTimeout(() => {
    //   this.handleDate();
    // }, 1000);
  }
  private created() {
    this.districtCode = this.$store.state.ZhtsModule.district.id;
  }

  private mounted() {
    this.getDistrictData();
  }

  private beforeDestroy() {
    clearTimeout(this.timeout);
  }
}
</script>
<style lang="less" scoped>
.TabLeft {
  margin-bottom: 10px;
  h4 {
    text-align: center;
  }

  .TabLeft_time {
    font-size: 16px;
    padding: 4px;
      color: #8cfffe;
  
    span {
      font-weight: bold;
    }
  }

  .TabLeft_cont {
    display: flex;
    justify-content: space-evenly;

    .TabLeft_box {
      width: 106px;
      height: 120px;
      margin-right: 2px;
      text-align: center;
      background: url('../../../assets/img/zhts/ssyq.png') no-repeat 0 0;
      // background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      p:nth-child(1) {
        font-size: 14px;
        white-space: nowrap;
        line-height: 32px;
      }
      p:nth-child(2) {
        font-weight: bold;
        font-size: 20px;
      }
      div {
        font-size: 16px;
        color: #8cfffe;
      }
      .color1 {
        color: #ce3636;
      }
      .color2 {
        color: #ee8240;
      }
      .color3 {
        color: #1dfe8d;
      }
      .color4{
        color: #86a5b1;
      }
    }
  }
}
</style>
